<template>
  <div id="chart" ref="chartRef"></div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts/theme/macarons'
import { recentAlarmStatistics } from '@/api/dashboard'
let chart
const chartRef = ref()
const getInfo = async () => {
  const result = await recentAlarmStatistics({ dayType: 1 })
  console.log(result, '近期')
  nextTick(() => {
    init(result.data)
  })
}
getInfo()
const init = (data) => {
  const xData = data.map((i) => {
    const str = i.forDate.split('-').splice(1, 2).join('-')
    return str
  })
  const seriesData = data.map((i) => {
    const total =
      (i.deviceAlarmNum || 0) +
      (i.earthquakeAlarmNum || 0) +
      (i.eventAlarmNum || 0) +
      (i.pointAlarmNum || 0)
    return total
  })
  if (chart) chart.clear()
  chart = echarts.init(chartRef.value)
  const option = {
    grid: {
      left: '15%',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
    },
    yAxis: {
      type: 'value',
      name: '次数',
      nameTextStyle: {
        fontSize: 15,
        fontWeight: 700,
      },
    },
    series: [
      {
        data: seriesData,
        type: 'line',
        symbol: 'none',
        itemStyle: {
          color: '#F49638',
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, // 渐变起点 x（0-1）
            y: 0, // 渐变起点 y
            x2: 0, // 渐变终点 x
            y2: 1, // 渐变终点 y
            colorStops: [
              { offset: 0, color: '#F49638' }, // 起始颜色
              { offset: 1, color: '#fff' }, // 结束颜色
            ],
          },
        },
      },
    ],
  }
  chart.setOption(option)
  addEventListener(
    'resize',
    () => {
      chart.resize()
    },
    false,
  )
}
</script>

<style lang="scss" scoped>
#chart {
  width: 100%;
  height: 100%;
}
</style>
